<template>
	<div class="list" ref="wrapper">
		<div>
	      <div class="area">
	      	<div class="title">当前城市</div>
	      	<div class="currentCity">
	      		
	      		<div class="cityContent">北京</div>
	
	      	</div>
	      </div>
	      <div class="area">
	      	<div class="title">热门城市</div>
	      	 <div class="currentCity">
	      		
	      		<div class="cityContent" v-for="item of hot" :key="item.id ">{{item.name}}</div>
	
	
	      	</div>
	      </div>
	      <div class="area" v-for="(item,key) of cities" :key="key" :ref="key">
	      	<div class="title">{{key}}</div>
	        <div class="item border-bottom" v-for="innerItem of item" :key="innerItem.id">{{innerItem.name}}</div>
	      </div>
      </div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'
export default{
	props:{
		hot:Array,
		cities:Object,
		letter:String
	},
	mounted (){
		this.scroll=new BScroll(this.$refs.wrapper)
		click:true
	},
	watch:{
		letter (){
			if(this.letter){
				const element=this.$refs[this.letter][0]  /*better-scroll里面必需是DOM元素或是DOM 元素选择器*/
				this.scroll.scrollToElement(element)
			}
		}
	}
}
</script>

<style lang="stylus" scoped>
.title

 height:.56rem

 background:#ccc
 padding:.16rem 0 0 .2rem
.currentCity

 overflow:hidden
 padding-right:.2rem

.cityContent
 width:1.65rem
 height:.56rem
 line-height:.56rem
 margin:.1rem 
 border:.01rem solid #ccc
 text-align:center
 float:left
.item
 margin:.1rem 0
 padding:.1rem .2rem
.border-bottom
&:after
 border-color:gray
.list
 overflow:hidden
 position:absolute
 top:1.98rem
 left:0
 right:0
 bottom:0

</style>